$user-name-width: 170px;

.dataset-author-cell {
  max-width: $user-name-width;
  width: $user-name-width;

  &__input {
    width: 100%;
    height: 100%;
    outline: none;
  }

  &__name-tag {
    position: relative;
    margin: 0;
    padding-right: 20px;
    font-weight: 100;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;

    &::after {
      content: '\f040';
      position: absolute;
      top: 0;
      right: 0;
      font-family: $font-awesome-stack;
    }
  }

  &__user-name {
    display: none;
    width: 100%;
    height: 100%;
    outline: none;
    border-radius: 0;
  }

  &--editing {
    .dataset-author-cell__name-tag {
      display: none;
    }

    .dataset-author-cell__user-name {
      display: block;
    }
  }
}

// Adds rules for the column in a dataset-author table
.dataset-author-column {
  &--wide {
    width: 15%;
  }

  &--narrow {
    width: 9%;
  }

  &--extra-wide {
    width: 28%;
  }
}

.dataset-owner-table {
  &#{&} {
    margin-top: item-spacing(4);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
    border: 0;
  }

  &#{&} td,
  &#{&} th {
    padding: item-spacing(5 4);
    font-weight: fw(normal, 4);
  }

  &#{&} &--wrap {
    white-space: normal;
  }

  &__add-owner {
    height: 84px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 24px;

    .twitter-typeahead {
      width: 142px;
    }
  }

  &__trigger {
    color: get-color(blue6);
    font-weight: 600;
  }

  .remove-dataset-author {
    color: set-color(grey, mid);
    background-color: transparent;
    float: right;

    &:hover {
      background-color: transparent;
      color: set-color(grey, dark);
    }
  }
}

.dataset-owner__retry-owners {
  @include flex-column-center;
}
